<!-- components/ClientDetail.vue -->
<template>
  <div v-if="client" class="client-detail">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="detail-item">
          <label>设备类型：</label>
          <el-tag :type="getDeviceTypeTag(client.deviceType)">
            {{ client.deviceType }}
          </el-tag>
        </div>
        <div class="detail-item">
          <label>IP地址：</label>
          <span>{{ client.ip }}</span>
        </div>
        <div class="detail-item">
          <label>地理位置：</label>
          <span>{{ client.location }}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="detail-item">
          <label>网络状态：</label>
          <span>{{ client.network }}</span>
        </div>
        <div class="detail-item">
          <label>模型版本：</label>
          <el-tag>{{ client.modelVersion }}</el-tag>
        </div>
        <div class="detail-item">
          <label>最后活跃：</label>
          <span>{{ client.lastActive }}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="detail-item">
          <label>安全评分：</label>
          <el-progress
              :percentage="client.securityScore"
              :color="getSecurityColor(client.securityScore)"
              :stroke-width="18"
          />
        </div>
        <div class="detail-item">
          <label>参与轮次：</label>
          <span>{{ client.rounds }}</span>
        </div>
        <div class="detail-item">
          <label>当前状态：</label>
          <el-tag :type="client.status === 'online' ? 'success' : 'info'">
            {{ client.status === 'online' ? '在线' : '离线' }}
          </el-tag>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

const props = defineProps({
  client: {
    type: Object,
    required: true
  }
})

const getDeviceTypeTag = (type: string) => {
  const map: any = {
    Mobile: 'primary',
    Desktop: 'success',
    IoT: 'warning',
    Edge: 'danger'
  }
  return map[type] || 'info'
}

const getSecurityColor = (score: number) => {
  if (score >= 80) return '#67C23A'
  if (score >= 70) return '#E6A23C'
  return '#F56C6C'
}
</script>

<style scoped>
.detail-item {
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 4px;
}

.detail-item label {
  display: inline-block;
  width: 100px;
  color: var(--el-text-color-secondary);
  font-weight: 500;
}
</style>